import React, { Component } from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import { hashHistory } from 'react-router'

import './style.less'

class SearchInput extends Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    this.state = {
      value: ''
    }
  }

  handleChange(e) {
    let value = e.target.value;
    this.setState({
      value: value
    })
  }

  handleKeyUp(e) {
    if(e.keyCode !== 13){
      return;
    }
    let value = encodeURIComponent(e.target.value);
    hashHistory.push(`/search/all/${value}`)
  }

  componentDidMount() {
    this.setState({
      value: this.props.value
    })
  }

  render() {
    return (
        <input className="search-input"
          type="text"
          placeholder="请输入关键字"
          value={this.state.value}
          onChange={this.handleChange.bind(this)}
          onKeyUp={this.handleKeyUp.bind(this)}
        />
    )
  }
}

export default SearchInput;
